<template>
  <el-dialog
    :visible.sync="dialogShow"
    @close="closeDialog"
    :title="formData.id ? '修改' : '新增'"
  >
    <el-form
      :model="formData"
      label-width="120px"
      :rules="formRules"
      ref="form"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="mobile">
        <el-input v-model="formData.mobile"></el-input>
      </el-form-item>
        </el-col>
      </el-row>
      <!-- 新增的时候要校验、修改的时候不校验 -->
     <el-row>
      <el-col :span="12">
         <el-form-item v-if="formData.id" label="密码">
        <el-input
          v-model="formData.password"
          show-password
          placeholder="留空表示不修改"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" v-else prop="password">
        <el-input
          v-model="formData.password"
          show-password
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="12">
         <el-form-item label="性别" prop="sex">
        <el-switch
          :inactive-value="0"
          :active-value="1"
          inactive-text="女"
          active-text="男"
          v-model="formData.sex"
        ></el-switch>
      </el-form-item>
      </el-col>
     </el-row>
      <el-form-item label="头像">
        <!-- 上传接口地址：/common/upload?type=images   post    formData类型  file:文件信息-->
        <!-- 上传组件 -->
        <!-- list-type 属性表示展示方式 -->
        <!-- 默认el-upload在选择文件之后会自动触发上传行为；上传时不依赖axios，是它自己独立完成的 -->
        <!-- action 表示上传的地址 -->
        <!-- name 表示上传的文件字段名 -->
        <!-- on-success 获取上传成功之后的服务器端响应结果的 -->
        <!-- http-request 覆盖默认的上传行为 -->
        <!-- file-list 属性用于回显图片信息 -->
        <!-- <el-upload
          action="http://124.223.14.236:8060/admin/common/upload?type=images"
          name="file"
          list-type="picture-card"
          :headers="{ 'x-token': token }"
          :on-success="onSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload> -->
        <UploadImage ref="uploadImg" />
      </el-form-item>
      <el-form-item label="">
        <el-button size="small" @click="btnOk" type="primary">确定</el-button>
        <el-button size="small" @click="dialogShow = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
// -------------新增功能--------------
// 1. 分析接口  接口地址 /ydd_user/add 请求方式 POST   提交数据  {icon:'',mobile:'',password:'',sex:'0',username:''}
// 2. 封装接口
// 3. data定义变量 【弹框控制变量、表单数据变量、表单验证规则变量】
// 4. 绘制弹框  【布尔值绑定、新增按钮打开修改布尔值】
// 5. 绘制表单  【控件绘制、表单验证规则】  【 耗时工作， 涉及各种不同的组件！数据的展示交互，比较麻烦】
// 6. 确定按钮绑定提交事件  【表单验证、(对数据加工处理)发生新增请求、提示成功、列表更新、弹框关闭】
// 7. 弹框关闭事件  【表单重置、移除校验】
// -------------修改功能--------------
// 1. 分析接口
//    ====> 1.1 查询单个接口  接口地址 /ydd_user/rowInfo   请求方式 GET    查询参数/params参数  { id:xxx }
//    ====> 1.2 修改提交接口  接口地址 /ydd_user/update    请求方式 POST   {id:'',icon:'',mobile:'',password:'',sex:'0',username:''}
// 2. 封装接口
// 3. 弹框、表单复用增加的
// 4. 修改按钮绑定事件，传入修改行ID
// 5. 定义回显事件，接收修改ID，请求数据，回显表单，弹框打开
// 6. 处理标题、处理一下编辑状态下的展示效果等
// 7. 提交功能，借用增加的逻辑， 用if判断执行不同的请求逻辑即可
// 8. 弹框关闭事件,复用增加
import { addUserApi, editUserApi, getUserInfoApi } from '@/api/user'
import UploadImage from '@/components/ImageUpload'
export default {
  components: { UploadImage },
  name: 'addUser',
  data() {
    return {
      token: this.$store.state.user.token,
      // 弹框控制
      dialogShow: false,
      // 表单数据变量
      formData: { icon: '', mobile: '', password: '', sex: '0', username: '' },
      //   表单验证规则
      formRules: {
        mobile: [{ required: true, message: '请输入', trigger: 'blur' }],
        password: [{ required: true, message: '请输入', trigger: 'blur' }],
        username: [{ required: true, message: '请输入', trigger: 'blur' }],
        sex: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 提交逻辑
    async btnOk() {
      try {
        await this.$refs.form.validate()
      } catch (error) {
        return console.log(error)
      }
      // 从fileList里面取，取了修改icon属性
      if (this.$refs.uploadImg.fileList.length) {
        this.formData.icon = this.$refs.uploadImg.fileList[0].realtiveUrl
      } else {
        this.formData.icon = ''
      }
      if (this.formData.id) {
        // 修改行为
        await editUserApi(this.formData)
        this.$message.success('修改成功')
      } else {
        // 添加行为
        await addUserApi(this.formData)
        this.$message.success('添加成功')
      }
      this.$emit('updateList')
      this.dialogShow = false
    },
    // 弹框关闭
    closeDialog() {
      this.formData = {
        icon: '',
        mobile: '',
        password: '',
        sex: '0',
        username: ''
      }
      this.$refs.form.clearValidate()
      this.$refs.uploadImg.fileList = []
    },
    // 编辑回显事件
    async getRowInfo(id) {
      // this.dialogShow = true  // 弹框打开，渲染弹框里面的内容
      const res = await getUserInfoApi(id) // 请求数据，耗时，在耗时的过程中，弹框里面的内容已经创建好了。 ref访问读取可以正常了
      this.formData = res
      this.dialogShow = true // 写在这里弹框打开，内容开始创建，下面立即就通过ref读取，是无法读取到，弹框内容是需要时间创建的
      this.$nextTick(() => {
        console.log(this.$refs.uploadImg)
        // 有 头像才回显
        if (res.icon) {
          this.$refs.uploadImg.fileList = [
            {
              url: 'http://124.223.14.236:8060/' + res.icon,
              realtiveUrl: res.icon
            }
          ]
        }
      })
    }
    // 上传成功
    // onSuccess(response, file, fileList) {
    //   console.log(response.data)
    //   this.formData.icon = response.data.savePath
    // },
  }
}
</script>
<style></style>
